<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)"><view slot="navbar-center">折叠面板</view></w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4" :contentStyle="{ padding: '0' }">
			<w-collapse v-model="activeNames">
				<w-collapseItem :title="collapse.title" :name="collapse.name" v-for="(collapse, index) in collapseList" :key="index">
					<view class="content">{{ collapse.content }}</view>
				</w-collapseItem>
			</w-collapse>
		</pageDemoBlock>
		<pageDemoBlock title="手风琴" color="#e44611" :contentStyle="{ padding: '0' }">
			<w-collapse v-model="activeNames2">
				<w-collapseItem :title="collapse.title" :name="collapse.name" v-for="(collapse, index) in collapseList" :key="index">
					<view class="content">{{ collapse.content }}</view>
				</w-collapseItem>
			</w-collapse>
		</pageDemoBlock>
	</view>
</template>

<script>
import pageDemoBlock from '@/components/page-demo-block/index.vue';
export default {
	components: {
		pageDemoBlock
	},
	data() {
		return {
			activeNames: ['1'],
			activeNames2: '',
			collapseList: [
				{
					title: '平静思考问题,才会发现事情是多么简单',
					name: '1',
					content:
						'在你跌入人生谷底的时候，你身边所有的人都告诉你：要坚强，而且要快乐。坚强是绝对需要的，但是快乐？在这种情形下，恐怕是太为难你了。毕竟谁能在跌得头破血流的时候还要做到高兴？但你至少可以做到平静。平静地看待这件事，平静地处理该处理的事情就行。'
				},
				{
					title: '不被理解是常态,你我又不是例外！',
					name: '2',
					content: ' 有时候，你被人误解，你不想争辩，所以选择沉默。本来就不需要所有的人都会了解你，因此你也没必要对全世界解释。做真实的自己就好。'
				}
			]
		};
	}
};
</script>

<style lang="scss" scoped>
.content {
	color: #969799;
	font-size: 26rpx;
}
</style>
